<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
   <style>
       .active{
           class:"active"
       }

   </style>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/dropzone/5.5.1/dropzone.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/dropzone/5.5.1/basic.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <div class="container" style="width:85% ">
        <table class="table table-hover">

            <tr>
                <td align="right" colspan="9">
                   <button class="btn btn-primary" onclick="showAdd()">添加</button>
                </td>
            </tr>

            <tr>
                <th>ID</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>实际售价</th>
                <th>商品描述</th>
                <th>商品图片</th>
                <th>操作</th>
            </tr>
            <tr th:each="pro : ${product}">
                <td th:text="${pro.pid}">ID</td>
                <td th:text="${pro.pname}">商品名称</td>
                <td th:text="${pro.price}">商品价格</td>
                <td th:text="${pro.salePrice}">实际售价</td>
                <td th:text="${pro.pdesc}">商品描述</td>
                <td><img th:src="${pro.pimage}" height="100px" width="100px"></td>
                <td><button class="btn btn-success" id="update" th:onclick="|update(${pro.pid})|">修改</button> &nbsp;<button class="btn btn-danger"  th:onclick="|delPro(${pro.pid})|">删除</button></td>
            </tr>


        </table>

        <div class="row">
            <div align="right" class="col-lg-12">
                <nav aria-label="Page navigation">
                    <ul class="pagination">

                        <li>
                            <a th:href="|/shop/product/showPage/${pageInfo.getFirstPage()}/${pageInfo.pageSize}|">首页</a>
                        </li>
                        <li th:class="${pageInfo.pageNum==1?'disabled':''}">
                            <a th:href="|/shop/product/showPage/${pageInfo.getPrePage()}/${pageInfo.pageSize}|" aria-label="Previous" >
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li th:class="${page==pageInfo.pageNum?'active':''}" th:each="page : ${pageInfo.getNavigatepageNums()}"><a th:href="|/shop/product/showPage/${page}/${pageInfo.pageSize}|"><span th:text="${page}"></span></a></li>

                        <li>
                            <a th:href="|/shop/product/showPage/${pageInfo.getNextPage()}/${pageInfo.pageSize}|" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>

                        <li>
                            <a th:href="|/shop/product/showPage/${pageInfo.getLastPage()}/${pageInfo.pageSize}|">尾页</a>
                        </li>
                    </ul>
                </nav>
            </div>



        </div>

    </div>
<!--添加商品-->
    <div class="modal fade" id="addForm"   tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width: 85%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加商品</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" action="/shop/product/addPro" id="addProFom" enctype="multipart/form-data" method="post">
                        <div class="form-group" >
                            <label for="pname" class="col-sm-2 control-label">商品名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="pname" name="pname" placeholder="请输入商品名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="price" class="col-sm-2 control-label">商品售价</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="price" name="price" placeholder="请输入价格">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="salePrice" class="col-sm-2 control-label">实际售价</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="salePrice" name="salePrice" placeholder="请输入实际售价">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="typeId" class="col-sm-2 control-label">商品类型</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="typeId" name="typeId">
                                    <option value="1">手机</option>
                                    <option value="2">家电</option>
                                    <option value="3">娃娃</option>
                                    <option value="4">电脑</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="dropz" class="col-sm-2 control-label">商品图片</label>
                            <div class="col-sm-10">
                                <!-- <input type="file" class="form-control" id="pPic" name="file" placeholder="商品图片">-->
                                <div id="dropz" class="dropzone"></div>
                                <input type="hidden" id="pPic" name="pimage"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="editor" class="col-sm-2 control-label">商品描述</label>
                            <div class="col-sm-10">
                                <!--<input type="text" class="form-control" id="pDesc" name="pDesc" placeholder="请输入商品描述">-->
                                <div id="editor"></div>
                                <input type="hidden" id="pdesc" name="pdesc">
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="addPro">添加</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

<!--修改商品-->
    <div class="modal fade" id="updateForm"   tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width: 85%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改商品</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" action="/shop/product/EditPro" id="updateProFom" enctype="multipart/form-data" method="post">
                        <input type="hidden" id="hidden_pid" name="pid"/>


                        <div class="form-group" >
                            <label for="upname" class="col-sm-2 control-label">商品名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="upname" name="pname" placeholder="商品名称">
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="upprice" class="col-sm-2 control-label">商品售价</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="upprice" name="price" placeholder="价格">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="upsalePrice" class="col-sm-2 control-label">实际售价</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="upsalePrice" name="salePrice" placeholder="实际售价">
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="pPic" class="col-sm-2 control-label">商品图片</label>
                            <div class="col-sm-10">
                                <!-- <input type="file" class="form-control" id="pPic" name="file" placeholder="商品图片">-->
                                <img src="" height="150px" width="150px" id="imgId">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="editor" class="col-sm-2 control-label">商品描述</label>
                            <div class="col-sm-10">
                                <!--<input type="text" class="form-control" id="pDesc" name="pDesc" placeholder="请输入商品描述">-->
                                <textarea class="form-control" id="uppdesc" name="pdesc" rows="3"></textarea>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="updatePro" >确认修改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/dropzone/5.5.1/dropzone.js"></script>
    <script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.js"></script>
<script>
    function showAdd() {
        $('#addForm').modal({
            keyboard: false
        })
    }

    $("#update").click(function(){
        $("#updateForm").modal({
            backdrop:false
        });
    });

    $("#updatePro").click(function () {
        $("#updateProFom").submit();
    })



    var myDropzone = new Dropzone("#dropz", {
        url: "/shop/product/upload",
        dictDefaultMessage: '拖动文件至此或者点击上传', // 设置默认的提示语句
        paramName: "dropzFile", // 传到后台的参数名称
        init: function () {
            this.on("success", function (file, data) {
                console.log(data)
                var imagePath =  data.data[0];
                //将图片路径放入到表单中
                $("#pPic").val(imagePath);
            });
        }
    });

    var E = window.wangEditor;
    var editor = new E('#editor');
    // 配置服务器端地址
    editor.customConfig.uploadImgServer = '/shop/product/upload'
    editor.customConfig.uploadFileName = 'dropzFile'
    editor.create();

    $("#addPro").click(function(){
        $("#pdesc").val(editor.txt.html());
        $("#addProFom").submit();
    })


    function delPro(pid){
        $.ajax({
            url:'/shop/product/delPro?pid='+pid,
            type:'json',
            success:function(d){
                // console.log(d);
                alert(d.message);
                if(d.errno==1000){
                    window.location.href="/shop/product/showPage/1/3";
                }
            }
        })
    }

    function update(pid){
        var product;
        $.ajax({
            url: '/shop/product/updatePro?pid='+pid,
            type: 'json',
            success: function(d){

                product = d.data;
                console.log(product);

                //2.弹模态框，将商品数据回显
                $("#updateForm").modal({
                    backdrop:"static"
                })
                $("#hidden_pid").val(product.pid);
                $("#upname").val(product.pname);
                $("#upprice").val(product.price);
                $('#upsalePrice').val(product.salePrice);
                $('#uppdesc').val(product.pdesc);
                $("#imgId").attr('src',product.pimage);
            }
        })
    }



    $(function($) {


    });



</script>
</body>
</html>
